<!DOCTYPE HTML>

<html>

	<head>
  
		<style>
			body {
				margin: 0px;
				padding: 0px;
			}
			canvas {
				border: 1px solid #9C9898;
			}
		</style>
		
		<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.8.js"></script>
		<script>
		
			function writeMessage(messageLayer, message) {
			
				var context = messageLayer.getContext();
				messageLayer.clear();
				context.font = "18pt Calibri";
				context.fillStyle = "black";
				context.fillText(message, 10, 25);
				
			}

			window.onload = function() {
			
				var firstCircle;
				var lastCircle;
				
				var firstState = false;

				var stage = new Kinetic.Stage({
					container: "container",
					width: 500,
					height: 500
				});
				var shapesLayer = new Kinetic.Layer();
				var messageLayer = new Kinetic.Layer();
				
				var line = new Kinetic.Line({
				
					points: [50, 50, 200, 50],
					stroke: "black",
					strokeWidth: 15,
					lineCap: "round",
					lineJoin: "round"
					
				});

				var circle1 = new Kinetic.Circle({
				
					x: 100,
					y: 100,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle1.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle1");
				});
				
				circle1.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle1");
				});
				circle1.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle1");
				});
				circle1.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle1;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle1;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle1");
					
				});
				circle1.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle1");
				});
				
				shapesLayer.add(circle1);
				
				var circle2 = new Kinetic.Circle({
				
					x: 200,
					y: 100,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle2.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle2");
				});
				
				circle2.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle2");
				});
				circle2.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle2");
				});
				circle2.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle2;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle2;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle2");
					
				});
				circle2.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle2");
				});
				
				shapesLayer.add(circle2);
				
				var circle3 = new Kinetic.Circle({
				
					x: 300,
					y: 100,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle3.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle3");
				});
				
				circle3.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle3");
				});
				circle3.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle3");
				});
				circle3.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle3;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle3;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle3");
					
				});
				circle3.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle3");
				});
				
				shapesLayer.add(circle3);
				
				var circle4 = new Kinetic.Circle({
				
					x: 400,
					y: 100,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle4.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle4");
				});
				
				circle4.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle4");
				});
				circle4.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle4");
				});
				circle4.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle4;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle4;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle4");
					
				});
				circle4.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle4");
				});
				
				shapesLayer.add(circle4);
				
				var circle5 = new Kinetic.Circle({
				
					x: 100,
					y: 200,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle5.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle5");
				});
				
				circle5.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle5");
				});
				circle5.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle5");
				});
				circle5.on("mousedown", function() {
				
					if( false === firstState ){
					
						firstCircle = circle5;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle5;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle5");
					
				});
				circle5.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle5");
				});
				
				shapesLayer.add(circle5);
				
				var circle6 = new Kinetic.Circle({
				
					x: 200,
					y: 200,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle6.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle6");
				});
				
				circle6.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle6");
				});
				circle6.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle6");
				});
				circle6.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle6;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle6;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle6");
					
				});
				circle6.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle6");
				});
				
				shapesLayer.add(circle6);
				
				var circle7 = new Kinetic.Circle({
				
					x: 300,
					y: 200,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle7.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle7");
				});
				
				circle7.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle7");
				});
				circle7.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle7");
				});
				circle7.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle7;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle7;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle7");
					
				});
				circle7.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle7");
				});
				
				shapesLayer.add(circle7);
				
				var circle8 = new Kinetic.Circle({
				
					x: 400,
					y: 200,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle8.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle8");
				});
				
				circle8.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle8");
				});
				circle8.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle8");
				});
				circle8.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle8;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle8;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle8");
					
				});
				circle8.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle8");
				});
				
				shapesLayer.add(circle8);
				
				var circle9 = new Kinetic.Circle({
				
					x: 100,
					y: 300,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle9.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle9");
				});
				
				circle9.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle9");
				});
				circle9.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle9");
				});
				circle9.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle9;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle9;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle9");
					
				});
				circle9.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle9");
				});
				
				shapesLayer.add(circle9);
				
				var circle10 = new Kinetic.Circle({
				
					x: 200,
					y: 300,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle10.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle10");
				});
				
				circle10.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle10");
				});
				circle10.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle10");
				});
				circle10.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle10;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle10;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle10");
					
				});
				circle10.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle10");
				});
				
				shapesLayer.add(circle10);
				
				var circle11 = new Kinetic.Circle({
				
					x: 300,
					y: 300,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle11.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle11");
				});
				
				circle11.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle11");
				});
				circle11.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle11");
				});
				circle11.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle11;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle11;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle11");
					
				});
				circle11.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle11");
				});
				
				shapesLayer.add(circle11);
				
				var circle12 = new Kinetic.Circle({
				
					x: 400,
					y: 300,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle12.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle12");
				});
				
				circle12.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle12");
				});
				circle12.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle12");
				});
				circle12.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle12;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle12;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle12");
					
				});
				circle12.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle12");
				});
				
				shapesLayer.add(circle12);
				
				var circle13 = new Kinetic.Circle({
				
					x: 100,
					y: 400,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle13.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle13");
				});
				
				circle13.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle13");
				});
				circle13.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle13");
				});
				circle13.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle13;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle13;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle13");
					
				});
				circle13.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle13");
				});
				
				shapesLayer.add(circle13);
				
				var circle14 = new Kinetic.Circle({
				
					x: 200,
					y: 400,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle14.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle14");
				});
				
				circle14.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle14");
				});
				circle14.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle14");
				});
				circle14.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle14;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle14;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle14");
					
				});
				circle14.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle14");
				});
				
				shapesLayer.add(circle14);
				
				var circle15 = new Kinetic.Circle({
				
					x: 300,
					y: 400,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle15.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle15");
				});
				
				circle15.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle15");
				});
				circle15.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle15");
				});
				circle15.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle15;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle15;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle15");
					
				});
				circle15.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle15");
				});
				
				shapesLayer.add(circle15);
				
				var circle16 = new Kinetic.Circle({
				
					x: 400,
					y: 400,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle16.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle16");
				});
				
				circle16.on("mouseover", function() {
					writeMessage(messageLayer, "Mouseover circle16");
				});
				circle16.on("mouseout", function() {
					writeMessage(messageLayer, "Mouseout circle16");
				});
				circle16.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle16;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle16;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line.setPoints(pointArray);
						
						shapesLayer.add(line);

						stage.add(shapesLayer);
						stage.add(messageLayer);	
						
					}
					
					writeMessage(messageLayer, "Mousedown circle16");
					
				});
				circle16.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle16");
				});
				
				shapesLayer.add(circle16);

				stage.add(shapesLayer);
				stage.add(messageLayer);
				
			};

		</script>
		
	</head>
	  
	<body>
		<div id="container"></div>
	</body>
  
</html>
